<template>
  <div class="app-container">
    <!-- 条件查询区域开始 -->
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('sysModule.code')" prop="moduleCode">
              <el-input
                v-model="queryParams.moduleCode"
                :placeholder="$t('sysModule.codeRequired')"
                class="!w-[203px]"
                clearable
                @keyup.enter="tableHooks.handleQuery()"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('sysModule.name')" prop="likeModuleName">
              <el-input
                v-model="queryParams.likeModuleName"
                :placeholder="$t('sysModule.nameRequired')"
                class="!w-[203px]"
                clearable
                @keyup.enter="tableHooks.handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="search-btn">
              <el-button type="primary" @click="tableHooks.handleQuery()">
                {{ $t("common.search") }}
              </el-button>
              <el-button @click="tableHooks.resetQuery()">{{
                $t("common.reset")
              }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="clear"></div>
    </div>
    <el-card shadow="never" class="table-container">
      <!-- 按钮开始 -->
      <template #header>
        <!-- 条件查询区域结束 -->
        <el-row justify="space-between">
          <el-col :span="17">
            <el-button
              v-hasPerm="['rbac:module:add']"
              type="primary"
              @click="handleAdd"
            >
              {{ $t("common.add") }}
            </el-button>
            <el-button
              v-hasPerm="['rbac:module:delete']"
              type="primary"
              @click="tableHooks.deleteRecords()"
            >
              {{ $t("common.batchDelete") }}
            </el-button>
          </el-col>
          <el-col :span="7" class="container-float">
            <jmash-column-select
              v-model="tableLabel"
              label-name="rbac/rbac-module"
            />
          </el-col>
        </el-row>
      </template>
      <!-- 按钮结束 -->

      <!-- 表格开始 -->
      <jmash-table
        ref="multipleTableRef"
        row-key="moduleId"
        :list-loading="listLoading"
        :data="tableData"
        :table-label="tableLabel"
        @selection-change="tableSelected"
        @sort-change="handleSort"
      >
        <!-- 排序 -->
        <template #sort="scope">
          <el-icon
            size="16"
            @click="tableHooks.handleMove(scope.data.row, false)"
          >
            <Bottom />
          </el-icon>
          <el-icon
            size="16"
            @click="tableHooks.handleMove(scope.data.row, true)"
          >
            <Top />
          </el-icon>
        </template>
        <!-- 操作按钮 -->
        <template #operation="scope">
          <span
            v-hasPerm="['rbac:module:update']"
            class="el-button-color"
            @click="handleEdit(scope.data.row)"
          >
            {{ $t("common.edit") }}
          </span>
          <span
            v-hasPerm="['rbac:module:delete']"
            class="el-button-color dropdown-left"
            @click="tableHooks.deleteRecord(scope.data.row)"
          >
            {{ $t("common.delete") }}
          </span>
        </template>
      </jmash-table>
      <template #footer>
        <jmash-pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:current-page="queryParams.curPage"
          v-model:page-size="queryParams.pageSize"
          @pagination="tableHooks.getList()"
        />
        &nbsp;
      </template>
    </el-card>
    <module-edit
      v-if="dialog.visible"
      v-model="dialog.visible"
      :title="dialog.title"
      :entity-key="entityKey"
      width="600px"
      @refresh="refresh"
    />
  </div>
</template>
<script setup lang="ts">
import { type Ref, ref, reactive } from "vue";
import {
  type TableColumn,
  type TableSort,
  type DialogRef,
  useTableHooks,
} from "jmash-core";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

import { moduleApi } from "@/api/system/module/index";
import type {
  ModuleReq,
  ModuleModel,
  ModuleKey,
} from "@/api/system/module/types";
import moduleEdit from "./edit.vue";
const queryParams = ref<ModuleReq>({
  curPage: 1,
  pageSize: 10,
});
const tableLabel: Ref<TableColumn[]> = ref([
  {
    label: "sysModule.code",
    width: "200",
    prop: "moduleCode",
    isColumn: true,
    sortable: true,
  },
  {
    label: "sysModule.name",
    width: "200",
    prop: "moduleName",
    isColumn: true,
    sortable: true,
  },
  {
    label: "sysModule.description",
    prop: "description",
    isColumn: true,
  },
  {
    label: "sysModule.sort",
    width: "100",
    prop: "orderName",
    columnType: "slot",
    slotName: "sort",
    isColumn: true,
  },
  {
    label: "common.operate",
    width: "200",
    columnType: "slot",
    slotName: "operation",
    fixed: "right",
    isColumn: true,
  },
]);
const dialog = reactive<DialogRef>({
  visible: false,
  title: "",
});

const {
  tableHooks,
  multipleTableRef,
  queryFormRef,
  listLoading,
  tableData,
  total,
} = useTableHooks(t, moduleApi, queryParams);

let entityKey = reactive<ModuleKey>({});

// 列表多选
function tableSelected(value: ModuleModel[]) {
  tableHooks.selectionRows.value = value;
}

// 新增
function handleAdd() {
  entityKey = reactive<ModuleKey>({});
  dialog.title = t("common.add");
  dialog.visible = true;
}

// 编辑
function handleEdit(row: ModuleModel) {
  entityKey.moduleId = row.moduleId;
  dialog.title = t("common.edit");
  dialog.visible = true;
}

// 处理排序
function handleSort(sort: TableSort) {
  tableHooks.handleSort(sort.prop, sort.order);
}

/**
 * 从子组件传过来的事件，刷新列表
 *
 * @returns {void}
 */
function refresh(value: boolean) {
  if (value) {
    tableHooks.getList();
  }
}
tableHooks.getList();
</script>
